﻿@{
    Layout = "~/Views/Shared/_FormWhite.cshtml";
}

<div class="wrapper animated fadeInRight" id="box">
    <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
     </el-row>
    <form id="form" class="form-horizontal m">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th colspan="5" style="text-align:center">用车明细汇总</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                    
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    $(function () {
        getForm();

        $('#form').validate({
            rules: {
                car_rental_addr: { required: true }
            }
        });
    });
     new Vue({
        //    此处指向vue组件所要渲染的DOM标签 <div id="box"></div>   el:'#box'  用id属性标识 也可用class属性
        // 如果是class <div class="box"></div>   el:'.box' 
        // 总之最外层div用class或id绑定js ，下面el对应body对外层div选择器名称，绑定之后才可以使用elementui中组件内容
        el: '#box',
        data() {
            return {
            }
        },
        methods: {
        }
    })   

    function getForm() {
        if (id > 0) {
            ys.ajax({
                url: '@Url.Content("~/QixingManage/PrebookOrder/GetFormJson")' + '?id=' + id,
                type: 'get',
                success: function (obj) {
                    if (obj.Tag == 1) {
                        var partsdatastr = obj.Data.other_parts_data;
                        var cartypedatastr = obj.Data.PreBookCarTypes;
                        var CarList = obj.Data.CarList;
                        var html = "";
                        var count = 0;
                        var nickname = obj.Data.nickname == null ? "无" : obj.Data.nickname;
                        var telephone = obj.Data.telephone == null ? "无" : obj.Data.telephone;
                        var wx = obj.Data.wx == null ? "无" : obj.Data.wx;
                        if (obj.Data.type == 1) {
                            html += "<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan='3'>配送信息</th>";
                            html += "<td style=\"text-align:center\" rowspan='3'>配送方式:送货上门</td><td style=\"text-align:center\" rowspan='3'>联系信息</td><td>联系人</td><td>" +nickname+"</td></tr>";
                            html += "<tr><td>联系电话</td><td>" +telephone +"</td></tr>";
                            html += "<tr><td>微信号</td><td>" +wx +"</td></tr>";
                        }
                        else if (obj.Data.type == 2) {
                            html += "<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan='3'>配送信息</th>";
                            html += "<td style=\"text-align:center\" rowspan='3'>配送方式:来店自提</td><td style=\"text-align:center\" rowspan='3'>联系信息</td><td>联系人</td><td>" +nickname +"</td></tr>";
                            html += "<tr><td>联系电话</td><td>" + telephone +"</td></tr>";
                            html += "<tr><td>微信号</td><td>" + wx +"</td></tr>";
                        }
                        else
                        {
                            html += "<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan='3'>配送信息</th>";
                            html += "<td style=\"text-align:center\" rowspan='3'>配送方式:其他</td><td style=\"text-align:center\" rowspan='3'>联系信息</td><td>联系人</td><td>" +nickname +"</td></tr>";
                            html += "<tr><td>联系电话</td><td>" + telephone +"</td></tr>";
                            html += "<tr><td>微信号</td><td>" + wx +"</td></tr>";
                        }
                        
                        if (!ys.isNullOrEmpty(partsdatastr)) {
                            var partsdata = JSON.parse(partsdatastr);
                            var partsdatalength =partsdatalength = partsdata.length % 2 == 0 ? partsdata.length / 2 :Math.floor(partsdata.length / 2)+ 1;
                            count = count + 1;
                             html+="<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan='" + partsdatalength + "'>骑行装备</th>";
                            for (var i = 0; i < partsdata.length; i++) {
                                if (i == partsdata.length - 1) {
                                    if (partsdata.length % 2 == 0) {
                                        html += "<td>" + partsdata[i].name + "</td><td>" + partsdata[i].num + "</td></tr>";
                                    }
                                    else {
                                        html += "<td>" + partsdata[i].name + "</td><td>" + partsdata[i].num + "</td><td></td><td></td></tr>";
                                    }
                                }
                                else {
                                    if (i == 0) {
                                        html += "<td>" + partsdata[i].name + "</td><td>" + partsdata[i].num + "</td>";
                                    }
                                    else {
                                        if ((i + 1) % 2 == 0) {
                                            html += "<td>" + partsdata[i].name + "</td><td>" + partsdata[i].num + "</td></tr>";
                                        }
                                        else {
                                            html += "<tr><td>" + partsdata[i].name + "</td><td>" + partsdata[i].num + "</td>";
                                        }
                                    }
                                }
                            }
                        }
                        if (!ys.isNullOrEmpty(cartypedatastr)) {
                                count = count + 1;
                                var cartypedata = JSON.parse(cartypedatastr);
                            
                                var cartypedatalength = cartypedata.length % 2 == 0 ? cartypedata.length / 2 : Math.floor(cartypedata.length / 2) + 1;
                                html += "<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan='" + cartypedatalength + "'>车型</th>";
                                for (var i = 0; i < cartypedata.length; i++) {
                                    if (i == cartypedata.length - 1) {
                                        if (cartypedata.length % 2 == 0) {
                                            html += "<td>" + cartypedata[i].name + "</td><td>" + cartypedata[i].num + "</td></tr>";
                                        }
                                        else {
                                            html += "<td>" + cartypedata[i].name + "</td><td>" + cartypedata[i].num + "</td><td></td><td></td></tr>";
                                        }
                                    }
                                    else {
                                        if (i == 0) {
                                            html += "<td>" + cartypedata[i].name + "</td><td>" + cartypedata[i].num + "</td>";
                                        }
                                        else {
                                            if ((i + 1) % 2 == 0) {
                                                html += "<td>" + cartypedata[i].name + "</td><td>" + cartypedata[i].num + "</td></tr>";
                                            }
                                            else {
                                                html += "<tr><td>" + cartypedata[i].name + "</td><td>" + cartypedata[i].num + "</td>";
                                            }
                                        }
                                    }
                            }
                        }
                        
                        if (CarList) {
                            count = count + 1;
                            var partsdatalength = CarList.length % 2 == 0 ? CarList.length / 2 : Math.floor(CarList.length / 2) + 1;
                            html += "<tr><th class=\"text-nowrap\" style=\"text-align:center\" rowspan=" + partsdatalength + ">车辆信息</th>";
                            for (var i = 0; i < CarList.length; i++) { 
                                if (i ==0) {
                                    html += "<td style=\"text-align:center\" >名称:山地车111\t车架号:v12312341421</td><td style=\"text-align:center\">型号：27寸 黑色</td><td>出库时间</td><td>押金" + nickname + "</td></tr>";
                                }
                                else { 
                                    html += "<tr><td style=\"text-align:center\" >名称:山地车111\t车架号:v12312341421</td><td style=\"text-align:center\">型号：27寸 黑色</td><td>出库时间</td><td>押金" + nickname + "</td></tr>";
                                }
                            }
                        }

                        if (count == 0) {
                            html += "<tr><td colspan=\"5\">暂无数据</td></tr>";
                        }
                        $("#tbody").html(html);
                        $('#form').setWebControls(obj.Data);
                    }
                }
            });
        }
        else {
            var defaultData = {};
            $('#form').setWebControls(defaultData);
        }
    }

    function saveForm(index) {
        if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({ Id: id });
            ys.ajax({
                url: '@Url.Content("~/QixingManage/PrebookOrder/SaveFormJson")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        parent.searchGrid();
                        parent.layer.close(index);
                    }
                    else {
                        ys.msgError(obj.Message);
                    }
                }
            });
        }
    }
</script>

